<template>
<div id="home">
    <header-top></header-top>
    <div class="container">
        <nav-left></nav-left>
        <content-main></content-main>
    </div>
    <footer-bottom></footer-bottom>
</div>
</template>

<script>
const HeaderTop = () => import("../components/Header")
const NavLeft = () => import("../components/NavLeft")
const ContentMain = () => import("../components/Content")
const FooterBottom = () => import("../components/Footer")

export default {
    name: 'home',
    components: {
        HeaderTop,
        NavLeft,
        ContentMain,
        FooterBottom,
    }
}
</script>

<style scoped>
#home {
    min-height: 100vh;
    background-color: #ebebeb;
}
.container {
    display: flex;
    flex-direction: row;
    height: calc(100vh - 50px - 48px);
    min-height: 222px;
}
</style>
